{% load i18n lfs_tags %}

<div id="accessories-inline">
    <div class="navigation-pages-inline">
        {% if page.has_previous %}
            <a class="ajax-link"
               href="{% url lfs_manage_accessories_inline product.id%}?page=1"><img src="{{ STATIC_URL }}icons/resultset_first.png" alt='{% trans "First" %}' /></a>
            <a class="ajax-link"
               href="{% url lfs_manage_accessories_inline product.id%}?page={{ page.previous_page_number }}"><img src="{{ STATIC_URL }}icons/resultset_previous.png" alt='{% trans "Previous" %}' /></a>
        {% else %}
            <img src="{{ STATIC_URL }}icons/resultset_first.png" alt='{% trans "First" %}' />
            <img src="{{ STATIC_URL }}icons/resultset_previous.png" alt='{% trans "Previous" %}' />
        {% endif %}

        <span style="position: relative; top:-4px ">
            {{ page.number }} {% trans "of" %} {{ paginator.num_pages }}
        </span>

        {% if page.has_next %}
            <a class="ajax-link"
               href="{% url lfs_manage_accessories_inline product.id%}?page={{ page.next_page_number }}"><img src="{{ STATIC_URL }}icons/resultset_next.png" alt='{% trans "Next" %}' /></a>
            <a class="ajax-link"
               href="{% url lfs_manage_accessories_inline product.id%}?page={{ paginator.num_pages }}"><img src="{{ STATIC_URL }}icons/resultset_last.png"  alt='{% trans "Last" %}' /></a>

        {% else %}
            <span><img src="{{ STATIC_URL }}icons/resultset_next.png" alt='{% trans "Next" %}' /></span>
            <span><img src="{{ STATIC_URL }}icons/resultset_last.png" alt='{% trans "Last" %}' /></span>
        {% endif %}
    </div>

    <table class="lfs-manage-table" style="margin-top:20px">
        <tr>
            <td width="50%">
                <h2>{% trans "Selectable Products" %}</h2>
                <form id="add-accessories-form"
                      action="{% url lfs_manage_add_accessories product.id %}"
                      method="post">

                    <div id="accessories-left" style="padding-bottom:10px">
                        <table class="lfs-manage-table">
                            <tr>
                                <th class="checkbox">
                                    <input type="checkbox"
                                           class="select-all"
                                           value="accessories" />
                                </th>
                                <th class="middle">
                                    {% trans 'Name' %}
                                </th>
                                <th>
                                    {% trans 'SKU' %}
                                </th>
                                <th class="tiny right-padding">
                                    {% trans 'Active' %}
                                </th>
                            </tr>
                            {% for product in page.object_list %}
                                <tr class="{% cycle 'even' 'odd' %}">
                                    <td>
                                        <input type="checkbox"
                                               name="product-{{ product.id }}"
                                               class="select-accessories" />
                                    </td>
                                    <td>
                                        <a href="{% url lfs_manage_product product.id %}">
                                            {{ product.get_name }}
                                        </a>
                                    </td>
                                    <td>
                                        {{ product.get_sku }}
                                    </td>
                                    <td class="right-padding">
                                        {% if product.is_active %}
                                            <img src="{{ STATIC_URL }}icons/tick.png" />
                                        {% else %}
                                            <img src="{{ STATIC_URL }}icons/cross.png" />
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                    <input type="hidden"
                           name="keep-filters"
                           value="1" />

                    <input type="submit"
                           class="ajax-save-button button"
                           value="{% trans 'Add to accessories' %}" />

                </form>
            </td>
            <td width="50%">
                <h2>{% trans 'Selected Products' %}</h2>
                <form id="accessories-update-form"
                      action="{% url lfs_manage_remove_accessories product.id %}"
                      method="post">
                    <div id="accessories-right" style="padding-bottom:10px">
                        <table class="lfs-manage-table">
                            <tr>
                                <th class="checkbox">
                                    <input type="checkbox"
                                           class="select-all"
                                           value="selected-accessories" />
                                </th>
                                <th style="padding-right:5px">
                                    {% trans 'Name' %}
                                </th>
                                <th class="middle">
                                    {% trans 'SKU' %}
                                </th>
                                <th class="tiny right-padding">
                                    {% trans 'Position' %}
                                </th>
                                <th class="small">
                                    {% trans 'Quantity' %}
                                </th>
                                <th class="tiny right-padding">
                                    {% trans 'Active' %}
                                </th>
                            </tr>

                            {% for product_accessory in product_accessories %}
                                <tr class="{% cycle 'even' 'odd' %}">
                                    <td>
                                        <input type="checkbox"
                                               name="accessory-{{ product_accessory.accessory.id }}"
                                               class="select-selected-accessories"/>
                                    </td>
                                    <td style="padding-right:5px">
                                        <a href="{% url lfs_manage_product product_accessory.accessory.id %}">
                                            {{ product_accessory.accessory.get_name }}
                                        </a>
                                    </td>
                                    <td>
                                        {{ product_accessory.accessory.get_sku }}
                                    </td>
                                    <td>
                                        <input class="number right-padding"
                                               type="text"
                                               size="3"
                                               name="position-{{ product_accessory.accessory.id }}"
                                               value="{{ product_accessory.position }}" />
                                    </td>
                                    <td>
                                        <input class="number"
                                               type="text"
                                               size="5"
                                               name="quantity-{{ product_accessory.accessory.id }}"
                                               value="{{ product_accessory.quantity }}" />
                                    </td>
                                    <td class="right-padding">
                                        {% if product_accessory.accessory.is_active %}
                                            <img src="{{ STATIC_URL }}icons/tick.png" />
                                        {% else %}
                                            <img src="{{ STATIC_URL }}icons/cross.png" />
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                    <input type="hidden"
                           name="keep-filters"
                           value="1" />

                    <input type="submit"
                           class="button ajax-save-button"
                           name="save"
                           value="{% trans 'Save accessories' %}" />

                    <input type="submit"
                           class="ajax-save-button button"
                           name="remove"
                           value="{% trans 'Remove from accessories' %}" />
                </form>
            </td>
        </tr>
</div>
<script>
    align_buttons("#accessories");
</script>
